import React from 'react'
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Grid, Typography, TextField } from '@material-ui/core';
import { Icon } from 'components/atoms';

const useStyles = makeStyles(theme => ({
    root: {
        width: "100%",
    },
    typography: {
        textAlign: "left",
        fontFamily: "HurmeGeometricSans3-Black",
        fontSize: "36px",
        fontStyle: "normal",
        fontWeight: 700,
        lineHeight: "normal",
        textTransform: "uppercase",
        color: "#000",
        [theme.breakpoints.up('md')]: {
            fontSize: "48px",
        },
    },
    typography2: {
        color: "#fff",
        fontSize: "26px",
        lineHeight: "normal",
        textTransform: "uppercase"
    },
    typography3: {
        display:"none",
        [theme.breakpoints.up('md')]: {
            display:"block",
        },
    },
    grid: {
        direction:"column",
        [theme.breakpoints.up('md')]: {
            direction:"revert",
        },
    },
    gridItem: {
        fontSize: "14px",
        fontWeight: 700,
        marginTop:"30px",
        [theme.breakpoints.up('md')]: {
            marginTop:"0",
        },
    },
    icon: {
        padding: "8px 16px",
        verticalAlign: "middle",
    },
    input: {
        borderBottom: "1px solid #E2E2E2",
        margin: "16px 0",
        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
            border: "none",
        },
        "& .MuiOutlinedInput-notchedOutline": {
            border: "none",
        },
        "&:hover .MuiOutlinedInput-notchedOutline": {
            border: "none",
        },
        "& .MuiInputBase-input": {
            padding: "10px 0px",
        },
    },
    form: {
        marginTop: "50px"
    },
    platform: {
        background: "#1E1E1E",
        padding: "30px 0",
        margin: "50px 0",
    },
    footer: {
        padding: "0",
        [theme.breakpoints.up('md')]: {
            padding: "0 100px",
        },
    },
    button: {
        color: "#000",
        fontSize: "10px",
        padding: "12px 20px",
        border: "1px solid #9B9B9B",
        lineHeight: "18px",
        cursor: "pointer",
        marginLeft: "0",
        width: "160px",
        [theme.breakpoints.up('md')]: {
            marginLeft: "20px",
        },
    },
    emailGrid: {
        margin: "50px 0",
        padding: "0 30px",
        [theme.breakpoints.up('md')]: {
            padding: "0",
        },
    },
    copyright: {
        borderTop: "1px solid #b5b5b5",
        padding: "20px 0",
        fontSize: "12px",
        width: "100%",
        textAlign: "center",
        margin: "30px 0"
    }
}));

const Footer = () => {
    const classes = useStyles();
    const [value, setValue] = React.useState("");


    const handleChange = event => {
        event.persist();
        setValue(event.target.value)
    };


    const handleValue = () => {
        console.log(value)
        setValue("")
    };
    return (
        <div className={classes.root}>
            <Grid container className={classes.platform}>
                <Grid item container justifyContent='center' alignItems='center' xs={3}>
                    <div className={clsx(classes.icon)}>
                        <Icon
                            fontIconClass="fab fa-facebook-f"
                            fontIconColor={"#fff"}
                        />
                    </div>
                    <Typography className={clsx(classes.typography2,classes.typography3)}>facebook</Typography>
                </Grid>

                <Grid item container justifyContent='center' alignItems='center' xs={3}>
                    <div className={clsx(classes.icon)}>
                        <Icon
                            fontIconClass="fab fa-twitter"
                            fontIconColor={"#fff"}
                        />
                    </div>
                    <Typography className={clsx(classes.typography2,classes.typography3)}>twitter</Typography>
                </Grid>

                <Grid item container justifyContent='center' alignItems='center' xs={3}>
                    <div className={clsx(classes.icon)}>
                        <Icon
                            fontIconClass="fab fa-youtube"
                            fontIconColor={"#fff"}
                        />
                    </div>
                    <Typography className={clsx(classes.typography2,classes.typography3)}>youtube</Typography>
                </Grid>

                <Grid item container justifyContent='center' alignItems='center' xs={3}>
                    <div className={clsx(classes.icon)}>
                        <Icon
                            fontIconClass="fab fa-spotify"
                            fontIconColor={"#fff"}
                        />
                    </div>
                    <Typography className={clsx(classes.typography2,classes.typography3)}>spotify</Typography>
                </Grid>

            </Grid>

            <Grid container justifyContent="space-around" className={classes.footer}>
                <Grid item container justifyContent='center' alignItems='center' xs={12} className={classes.grid}>
                    <Grid item container justifyContent='center' alignItems='center' xs={12} md={2} className={classes.gridItem}>
                        ABOUT US
                    </Grid>
                    <Grid item container justifyContent='center' alignItems='center' xs={12} md={2} className={classes.gridItem}>
                        HELP CENTER
                    </Grid>
                    <Grid item container justifyContent='center' alignItems='center' xs={12} md={2} className={classes.gridItem}>
                        PRIVATE POLICY
                    </Grid>
                    <Grid item container justifyContent='center' alignItems='center' xs={12} md={2} className={classes.gridItem}>
                        CONTACT
                    </Grid>
                    <Grid item container justifyContent='center' alignItems='center' xs={12} md={2} className={classes.gridItem}>
                        BECOME A DISTRIBUTOR
                    </Grid>
                </Grid>
                <Grid item container justifyContent='center' alignItems='center' xs={12} className={classes.emailGrid}>
                    <Grid item xs={12} md={4}>
                        <TextField
                            placeholder="EMAIL FOR NEWSLETTER"
                            variant="outlined"
                            fullWidth
                            onChange={handleChange}
                            value={value}
                            className={classes.input}
                        />
                    </Grid>
                    <Grid item xs={12} md={2}>
                        <div className={classes.button} onClick={handleValue}>
                            SUBSCRIBE</div>
                    </Grid>
                </Grid>

                <Typography className={clsx(classes.typography, classes.copyright)}>copyright by yorn - designed by la-studio</Typography>
            </Grid>
        </div>
    )
}


Footer.propTypes = {
    /**
     * External classes
     */
    className: PropTypes.string,
};


export default Footer
